﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery二级高亮下拉导航效果 - 16素材网</title>
<link href="css/16sucai.css" type="text/css" rel="stylesheet" />
</head>
<body>

<!-- 导航代码end -->
  <div class="nav">
      <ul class="nav_list">
          <li class="drop-menu-effect">
              <a href="http://www.16sucai.com" class="selected2"><span>首页</span></a>
              <ul class="submenu">
                  <li><a href="plan_spreed.html">诗赋星家</a></li>
                  <li><a href="plan_list.html">社团比拼</a></li>
                  <li><a href="plan_list.html">诗友互动</a></li>
                  <li><a href="plan_list.html">诗友互动</a></li>
                  <li><a href="plan_list.html">诗友互动</a></li>
                  <li><a href="plan_list.html">诗友互动</a></li>
                  <li><a href="plan_list.html">诗友互动</a></li>
              </ul>
          </li>
          <li class="drop-menu-effect">
              <a href="http://www.16sucai.com"><span>活动比赛</span></a>
              <ul class="submenu">
                  <li><a href="show_dig.html">诗赋擂台</a></li>
              </ul>
          </li>
          <li class="drop-menu-effect"><a href="http://www.16sucai.com"><span>诗赋直播</span></a></li>
          <li class="drop-menu-effect"><a href="http://www.16sucai.com"><span>诗坛新闻</span></a></li>
          <li class="drop-menu-effect">
              <a href="http://www.16sucai.com"><span>诗人社团</span></a>
              <ul class="submenu">
                  <li><a href="plan_spreed.html">诗赋星家</a></li>
                  <li><a href="plan_list.html">社团比拼</a></li>
                  <li><a href="plan_list.html">诗友互动</a></li>
              </ul>
          </li>
          <li class="drop-menu-effect"><a href="http://www.16sucai.com"><span>楹联天地</span></a></li>
          <li class="drop-menu-effect"><a href="http://www.16sucai.com"><span>直通纸媒</span></a> </li>
          <li class="drop-menu-effect"><a href="http://www.16sucai.com"><span>我的诗话</span></a></li>
          <li class="drop-menu-effect">
              <a href="http://www.16sucai.com"><span>阅读欣赏</span></a>
              <ul class="submenu">
                  <li><a href="http://www.16sucai.com">自编诗集</a></li>
                  <li><a href="http://www.16sucai.com">刊物阅读</a></li>
                  <li><a href="http://www.16sucai.com">诗赋欣赏</a></li>
              </ul>
          </li>
          <li class="drop-menu-effect"><a href="http://www.16sucai.com"><span>经典诗库</span></a></li>
      </ul>
  </div>
<!-- 导航代码begin -->
    <!--<script src="../../javascript/jquery-1.11.1.min.js"></script>-->
<script src="js/jquery.min.js"></script>
<script>
function dropMenu(obj){
		$(obj).each(function(){
			var theSpan = $(this);
			var theMenu = theSpan.find(".submenu");
			var tarHeight = theMenu.height();
			theMenu.css({height:0,opacity:0});
			var t1;
			function expand() {
				clearTimeout(t1);
				theSpan.find('a').addClass("selected");
				theMenu.stop().show().animate({height:tarHeight,opacity:1},200);
			}
			
			function collapse() {
				clearTimeout(t1);
				t1 = setTimeout(function(){
					theSpan.find('a').removeClass("selected");
					theMenu.stop().animate({height:0,opacity:0},200,function(){
						$(this).css({display:"none"});
					});
				}, 250);
			}
			
			theSpan.hover(expand, collapse);
			theMenu.hover(expand, collapse);
		});
	}

$(document).ready(function(){
	dropMenu(".drop-menu-effect");
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://www.16sucai.com/" target="_blank">16素材网</a></p>
</div>
</body>
</html>